<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-01-25 22:28:22
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-01-26 20:25:31
 * @FilePath: /tuberculosis_screening_app/src/modules/patient/components/DateInput/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="date-input-wrapper">
    <van-search
      class="flex p_unset"
      v-model="model"
      left-icon="none"
      @click="handleClick"
      placeholder="起始日期"
    />
    <van-action-sheet v-model:show="isShow">
      <van-date-picker
        title="选择日期"
        v-model="currentDate"
        :columns-type="['year', 'month', 'day']"
        :max-date="maxDate"
        @cancel="isShow = false"
        @confirm="handleConfirm"
      />
    </van-action-sheet>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import dayjs from 'dayjs';

export default defineComponent({
  name: 'DateInput',
  props: {
    value: Object,
    maxDate: {
      type: Object,
      default: new Date()
    },
  },
  setup(props, { emit }) {

    const isShow = ref(false);
    const model = ref(props.value || '');
    const date = model.value ? dayjs(model.value) : dayjs();
    const currentDate = ref([date.year(), date.month() + 1, date.date()]);

    const generateDate = () => {
      const date = model.value ? dayjs(model.value) : dayjs();
      currentDate.value = [date.year(), date.month() + 1, date.date()];
    };
    const handleConfirm = ({ selectedValues }) => {
      model.value = selectedValues.join('-');
      emit('update:value', model.value);
      isShow.value = false;
    };

    const handleClick = () => {
      generateDate();
      isShow.value = true;
    };
    return {
      isShow,
      model,
      currentDate,
    
      handleClick,
      handleConfirm,
    };
  },
});
</script>

